Disabling webSecurity is a significant security risk, even in development mode. It makes your application vulnerable to cross-site scripting (XSS) attacks if it loads any third-party content in the renderer. While convenient for bypassing CORS issues, a more secure and production-like approach is to proxy requests through the main process. The main process is not subject to CORS, so it can safely fetch data from external APIs and forward it to the renderer process via IPC. This keeps webSecurity enabled, hardening your app against potential vulnerabilities.

This watch block only handles provider additions. When a provider is removed, its periodic validation interval continues to run, leading to a resource leak. You should also handle provider removal by stopping the corresponding interval. Note that broader refactoring for type safety should be addressed in a separate pull request to maintain a focused scope.

  watch(addedProviders, (newAdded, oldAdded) => {
    const allIds = new Set([...Object.keys(newAdded), ...Object.keys(oldAdded || {})]);
    for (const providerId of allIds) {
      const isNew = newAdded[providerId];
      const wasOld = oldAdded?.[providerId];

      if (isNew && !wasOld) {
        // Provider was just added, start its periodic validation if configured
        const intervalMs = providerValidationIntervalMsById.get(providerId);
        if (intervalMs && intervalMs > 0 && !providerRevalidationLoops.has(providerId)) {
          const loop = useIntervalFn(() => {
            void validateProvider(providerId, { force: true });
          }, intervalMs, { immediate: false, immediateCallback: false });
          loop.resume();
          providerRevalidationLoops.set(providerId, loop);
        }
      } else if (!isNew && wasOld) {
        // Provider was removed, stop its periodic validation
        const loop = providerRevalidationLoops.get(providerId);
        if (loop) {
          (loop as { pause: () => void }).pause();
          providerRevalidationLoops.delete(providerId);
        }
      }
    }
  }, { deep: true })

Detect added providers without comparing deep-watch old value

markProviderAdded() mutates addedProviders.value in place, and this watcher is deep: true, so on nested mutations Vue passes the same object for newAdded and oldAdded. That makes !oldAdded?.[providerId] false even when a key is newly inserted, so providers added after startup never enter this block and never get their periodic validation loop (contradicting the intended “watch newly added providers” behavior).

Useful? React with 👍 / 👎.